<template>
  <div class="main-body">
    <el-container>
      <el-aside width="250px">
        <div class="logo">
          <img src="@/assets/images/app-logo.svg" alt="">
        </div>
        <div class="menu">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu default-active="1-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                router="true" active-text-color="#51B37F" background-color="#454b52" text-color="#fff">
                <el-sub-menu index="1">
                  <template #title>
                    <el-icon :size="20">
                      <Menu />
                    </el-icon>
                    <span>更多管理</span>
                  </template>

                  <el-menu-item-group title="出勤管理">
                    <el-menu-item route="/punchin" index="1-1">上班打卡</el-menu-item>
                    <!-- v-if="if_users != 'root', " v-show="" -->
                    <el-menu-item route="/attendance" index="1-2" v-show="if_tf">考勤信息
                    </el-menu-item>
                  </el-menu-item-group>

                  <el-menu-item-group title="员工管理" v-show="if_tf">
                    <el-menu-item route="/userlist" index="1-3">员工列表</el-menu-item>
                    <el-menu-item route="/adduser" index="1-4">添加员工</el-menu-item>
                  </el-menu-item-group>

                  <el-menu-item-group title="目标管理">
                    <el-menu-item route="/log" index="1-5">工作日志</el-menu-item>
                    <el-menu-item route="/target" index="1-6" v-show="if_tf">部门目标</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>

                <el-sub-menu index="2">
                  <template #title>
                    <el-icon :size="20">
                      <Briefcase />
                    </el-icon>
                    <span>绩效管理</span>
                  </template>

                  <el-menu-item-group title="考核管理">
                    <el-menu-item route="/addassess" index="2-1" v-show="if_tf">添加考核</el-menu-item>
                    <el-menu-item route="/exams" index="2-2" v-show="if_tf">考题列表</el-menu-item>
                    <el-menu-item route="/assess" index="2-3" v-show="if_tf">考核列表</el-menu-item>
                    <el-menu-item route="/participate" index="2-4">参与考核</el-menu-item>
                  </el-menu-item-group>

                  <el-menu-item-group title="绩效分析" v-show="if_tf">
                    <el-menu-item route="/acconunting" index="2-5">工资核算</el-menu-item>
                  </el-menu-item-group>
                </el-sub-menu>

                <el-menu-item index="3" route="/userinfo">
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                  <span>个人信息</span>
                </el-menu-item>

              </el-menu>
            </el-col>
          </el-row>
        </div>
      </el-aside>
      <el-container>
        <el-header height="70px">
          <div class="head-body">
            <div class="title">
              <h1>绩效管理系统</h1>
            </div>
            <div class="login">
              <p>{{ user_if.user_name }}</p>
              <router-link to="/login">退出账号</router-link>
            </div>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting
  } from '@element-plus/icons-vue'
  import axios from "axios";
  import { reactive, ref, onMounted } from 'vue';
  import router from "@/router";
  import { FormInstance, FormRules } from 'element-plus';
  import { ElMessage } from 'element-plus';

  // 导入pinia数据仓库的数据变量
  import { useUser } from "@/stores/login";
  import { storeToRefs } from "pinia";
  // 引入element plus icons
  // <el-icon><HelpFilled /></el-icon>
  // <el-icon><Briefcase /></el-icon>
  // <el-icon><Menu /></el-icon>
  // <el-icon><UserFilled /></el-icon>
  import { Menu, HelpFilled, Briefcase, UserFilled } from '@element-plus/icons-vue'

  export default {
    name: "MainNav",
    components: {
      HelpFilled,
      Briefcase,
      UserFilled,
      Menu
    },
    setup() {

      let if_tf = ref();

      // 存储仓库并响应式
      let store = useUser();
      let { if_users } = storeToRefs(store);

      // 判断用户是否登录
      let user_if = reactive({
        if_state: false,
        user_name: if_users.value.name,
      });


      onMounted(() => {
        // 判断用户是否为管理员
        if (if_users.value.name === "root") {
          console.log("是成功", if_users.value.name);
          if_tf.value = true;
        } else {
          if_tf.value = false;;
        }
      })



      // let mk = ref(false);

      console.log("if", if_users.value.name);
      // console.log(mk.value);
      function if_user() {
        if (if_users.value.name === null) {
          return user_if.if_state = true;
        } else {
          return if_users.value.name;
        }
      }

      if_user();

      return {
        user_if,
        if_user,
        if_tf

      }
    }
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* 滚动条样式 */
  ::-webkit-scrollbar {
    width: 5px;
    background: #fff;
    /* background: #d2d2d2; */
    /* border-radius: 10px; */
    /* border: 1px solid rgb(0, 13, 255); */
  }

  ::-webkit-scrollbar-thumb {
    background: #cecece;
    border-radius: 10px;
  }

  .main-body {
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
  }

  .main-body .el-container {
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    /* background: #454b52; */


  }

  .main-body .el-container .el-aside {
    /* background: #2F4858; */
    /* background: #545c64; */
    background: #454b52;
  }

  .main-body .el-container .el-aside .logo {
    width: 100%;
    height: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-body .el-container .el-aside .logo img {
    width: 80px;
  }

  .main-body .el-container .el-aside .menu {
    /* border: 1px solid red; */
    width: 100%;
    /* height: 100%; */
  }

  .main-body .el-container .el-aside .menu .el-row {
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
  }

  /* .main-body .el-container .el-aside .menu .el-row .el-col {
} */

  /* .main-body .el-container .el-aside .menu .el-row .el-col .el-menu {
  border: 0;
} */

  .main-body .el-container .el-aside .menu .el-row .el-col.el-col-12 {
    /* border: 1px solid red; */
    width: 100%;
    height: 100%;
    /* background: #fff; */

  }

  .main-body .el-container .el-header {
    width: 100%;
    height: 70px;
    /* border: 1px solid red; */
    /* display: flex; */
    background: #fff;
    padding: 0;
    font-size: 16px;
  }

  .main-body .el-container .el-header .head-body {
    width: 100%;
    height: 70px;
    display: flex;
    /* border: 1px solid red; */
  }

  .main-body .el-container .el-header .head-body .title {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    /* border: 1px solid red; */
    padding-left: 4%;
  }

  .main-body .el-container .el-header .head-body .title h1 {
    font-size: 30px;
    /* color: #fff; */
  }

  .main-body .el-container .el-header .head-body .login {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: end;
    padding-right: 4%;
  }

  .main-body .el-container .el-header .head-body .login a {
    font-size: 18px;
    color: #2F4858;
    margin-left: 20px;
  }

  .main-body .el-container .el-header .head-body .login p {
    font-size: 18px;
  }

  .main-body .el-container .el-main {
    /* border: 1px solid red; */
    /* width: 100%; */
    /* background: #f0f3f8; */
    background: #fff;

    /* height: 100%; */
  }
</style>